<template>
  <div class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>病例设置</h3>
        <div @click="closeModal" style="cursor: pointer">×</div>
      </div>
      <div class="modal-body">
        <div class="format-buttons">
          <div class="gender-select-container">
            <div
              class="gender-option"
              :class="{ active: format === 'western' }"
              @click="onFormatChange('western')"
            >
              西医格式
            </div>
            <div
              class="gender-option"
              :class="{ active: format === 'chinese' }"
              @click="onFormatChange('chinese')"
            >
              中医格式
            </div>
          </div>
        </div>
        <div class="options">
          <el-checkbox-group v-model="checkList" class="checkbox-grid">
            <el-checkbox
              v-for="option in optionGroup"
              :key="option.fieldId"
              :value="option.fieldId"
              :label="option.fieldName"
              :disabled="option.isRequired == '1'"
            />
          </el-checkbox-group>
        </div>
      </div>
      <div class="modal-footer_buttons">
        <el-button @click="closeModal" type="">取消</el-button>
        <el-button class="confirm" @click="confirmModal" type="primary"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import stores from '@/store';
const medicalFieldStore = stores.useMedicalRecordFieldStore();
const emits = defineEmits(['visible', 'checkList']);
// 定义类型接口
interface MedicalRecordOption {
  id: number;
  name: string;
  checked: boolean;
}
const optionGroup = ref<any>([]);
const checkList = ref<any[]>([]);
type FormatType = 'chinese' | 'western';

// 定义 props
interface Props {
  visible: boolean;
  westernFields?: any[];
  chineseFields?: any[];
}
const props = defineProps({
  chineseFields: Array,
  westernFields: Array,
});
const visible = ref(false);
const format = ref<FormatType>('western');

defineExpose<{
  open: () => void;
}>({
  open: () => {
    // 初始化选项
    onFormatChange(format.value);
    visible.value = true;
  },
});
// 响应式数据
watch(
  () => props.chineseFields,
  (newValue) => {
    //console.log(newValue);
  }
);
// 方法
const closeModal = (): void => {
  visible.value = false;
  emits('visible');
};

const confirmModal = (): void => {
  emits('checkList', checkList, format.value);
  closeModal();
};
const onFormatChange = (newFormat: FormatType): void => {
  format.value = newFormat;
  //console.log(props.chineseFields);

  if (newFormat === 'chinese') {
    optionGroup.value = medicalFieldStore.chineseFields || [];
    if (props.chineseFields && props.chineseFields?.length > 0) {
      checkList.value = props.chineseFields;
    } else {
      // checkList.value =
      //   medicalFieldStore.chineseFields?.map((item: any) => item.fieldId) || [];
      checkList.value =
        medicalFieldStore.chineseFields
          ?.filter(
            (item: any) => item?.isDefault == '1' && item?.fieldScope != '2'
          )
          .map((item: any) => item.fieldId) || [];
    }
  } else {
    optionGroup.value = medicalFieldStore.westernFields || [];
    if (props.chineseFields && props.chineseFields?.length > 0) {
      checkList.value = props.chineseFields;
    } else {
      // checkList.value =
      //   medicalFieldStore.westernFields?.map((item: any) => item.fieldId) || [];
      checkList.value =
        medicalFieldStore.westernFields
          ?.filter(
            (item: any) => item?.isDefault == '1' && item?.fieldScope != '3'
          )
          .map((item: any) => item.fieldId) || [];
    }
  }
};

// 判断字段是否禁用（不允许取消选择）
const isFieldDisabled = (fieldName: string): boolean => {
  if (format.value === 'chinese') {
    // 中医格式：主诉、最后诊断不允许取消选择
    return (
      fieldName === '主诉' ||
      fieldName === '现病史' ||
      fieldName === '既往史' ||
      fieldName === '望闻问切' ||
      fieldName === '辨证论治' ||
      fieldName === '最后诊断'
    );
  } else {
    // 西医格式：主诉、最后诊断不允许取消选择
    return (
      fieldName === '主诉' ||
      fieldName === '现病史' ||
      fieldName === '既往史' ||
      fieldName === '体格检查' ||
      fieldName === '最后诊断'
    );
  }
};
onMounted(() => {
  onFormatChange(format.value);
});
</script>

<style scoped>
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.modal-content {
  background-color: #fff;
  max-width: 600px;
  border-radius: 8px;
  overflow: auto;
}

.modal-header,
.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.modal-body {
  padding: 0 10px 0px 10px;
}

.format-buttons {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.format-buttons button {
  margin-right: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  background-color: #e0e0e0;
  cursor: pointer;
}
.gender-option.active {
  background: #ffffff;
  padding: 4px 12px;
  color: var(--el-color-primary);
  font-weight: 400;
  font-size: 16px;
  color: #595959;
}

.options {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
/* 网格对齐复选框 */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 每行4个，可调整 */
  gap: 6px 0; /* 行间距、列间距可调整 */
  width: 100%;
}

.option-group {
  margin-bottom: 10px;
}

.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.progress {
  color: red;
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}

.modal-footer button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-footer .confirm {
  background-color: #009688;
  color: #fff;
}
.gender-select-container {
  display: flex;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  padding: 2px;
}

.gender-option {
  flex: 1;
  text-align: center;
  padding: 4px 0;
  cursor: pointer;
  color: #0c0c0c;
  background: #f5f5f5;

  padding: 4px 12px;
  color: var(--el-color-primary);
  font-weight: 400;
  font-size: 16px;
  color: #595959;
}

.gender-option.active {
  background: #ffffff;
  color: var(--el-color-primary);
}
.modal-footer_buttons {
  float: right;
  padding: 0 20px 20px 0;
}
</style>
